<template>
	<view >
		<view style="padding: 0 32rpx;">
			<view class="" v-if="hadBack">
				<u-row customStyle="padding: 20rpx;">
					<u-col><u-text text="我的反馈" size="16" color="#868686"></u-text></u-col>
				</u-row>
				<u-collapse >
					<u-collapse-item  :title="item.content.slice(-4)+'...'" name="Docs guide" v-for="(item,index) in myFeedBack">
						<view class="" style="margin: 16rpx 0;">
							<u--text 
							  :text="item.content" 
							   wordWrap='break-word'
							   lineHeight='25'
							  size="17"
								></u--text>
						</view>
						<u-album :urls="item.imgs.split(',')"></u-album>
					</u-collapse-item>
				</u-collapse>
			</view>
			<view class="" v-else>
				<u-row customStyle="padding: 20rpx;">
					<u-col><u-text text="您的宝贵意见" size="16" color="#868686"></u-text></u-col>
				</u-row>
				<u--textarea v-model="content" maxlength="500" placeholder="请输入内容" count></u--textarea>
				<u-row customStyle="padding: 20rpx;">
					<u-col span="4"><u-text text="上传您的图片" size="16" color="#868686"></u-text></u-col>
					<u-col span="4"><u-text text="(最多可传9张图片)" size="11" color="#ff5500"></u-text></u-col>
				</u-row>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="true" :maxCount="9"></u-upload>
				<u-row customStyle="padding: 20rpx;">
					<u-col span="4"><u-text text="您的联系方式" size="16" color="#868686"></u-text></u-col>
					<u-col span="8"><u--input border="bottom" placeholder="请输入您的手机号" v-model="phoneNumber" @change="change"></u--input></u-col>
				</u-row>
				<u-row customStyle="padding: 20rpx;">
					<u-col span="10" customStyle="margin: 0 auto;"><u-button type="primary" text="提交意见" @click="subFeed"></u-button></u-col>
				</u-row>
			</view>
		</view>
	
		<u-row v-if="hadBack ">
			<u-col span="6" offset="3"  customStyle="position: fixed;bottom: 60rpx; "><u-button type="primary" text="新增反馈" @click="hadBack = false"></u-button></u-col>
		</u-row>
	</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			content: '',
			phoneNumber: '',
			fileList1: [],
			myFeedBack:[],
			hadBack:true
		};
	},
	onLoad() {
		that = this;
	},
	mounted() {
		let userInfo = uni.getStorageSync('userInfo');
		if (!userInfo) {
			uni.showModal({
				content: '请登录后使用',
				success(r) {
					if (r.confirm) {
						uni.navigateTo({
							url: '../login/login'
						});
					} else {
						uni.navigateBack({});
					}
				}
			});
		} else {
			uni.showLoading({
				title:'加载中'
			})
			this.mNetTool.getAjaxUrlValueBackground(
				'capi/V2/ERFeedBack/erFeedBack/list',
				{
					created_by: userInfo.id
				},
				res => {
					console.log(res);
					uni.hideLoading()
					if (res.records != 0) {
						that.hadBack = true
						that.myFeedBack = res.rows
					}
				}
			);
		}
	},
	methods: {
		subFeed() {
			let userInfo = uni.getStorageSync('userInfo');
			let imgs = [];
			this.fileList1.forEach(item => {
				imgs.push(item.url);
			});
			let feed = {
				imgs: imgs.toString(),
				content: this.content,
				mobile: this.phoneNumber,
				created_by:userInfo.id
			};
			console.log(feed);
			// if(uni.$u.test.mobile(this.phoneNumber)&& !uni.$u.test.isEmpty(this.content)){
			if (this.phoneNumber.length == 11 && this.content.length > 5) {
				this.mNetTool.getAjaxUrlValueBackground('capi/V2/ERFeedBack/erFeedBack/save', feed, res => {
					console.log(res);
					uni.$u.toast('提交成功！');
					uni.navigateBack({});
				});
			}else if(this.content.length < 5){
				uni.$u.toast('反馈内容不可少于5个字');
				 
			} else {
				uni.$u.toast('请补全信息');
			}
		},
		// 删除图片
		deletePic(event) {
			that.fileList1.splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = that[`fileList${event.name}`].length;
			lists.map(item => {
				that[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await that.uploadFilePromise(lists[i].thumb);
				let item = that[`fileList${event.name}`][fileListLen];
				that[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fileUrl
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			// let url = "https://test.iloomo.com/capi/tools/public/fileUpload?token=" + uni.getStorageSync('token') + "&fileName=" +'img'
			return new Promise((resolve, reject) => {
				// mUpLoadFile.uploadImg(url,res =>{
				// 	setTimeout(() =>{
				// 		// resolve(res.data.data)
				// 		console.log(res)
				// 	},1000)
				// })
				let a = uni.uploadFile({
					url: 'https://api.iloomo.com/capi/tools/public/fileUpload?token=08fee81482a84d388029f67ed57490cf', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						console.log(JSON.parse(res.data));
						setTimeout(() => {
							resolve(JSON.parse(res.data));
						}, 1000);
					}
				});
			});
		}
	}
};
</script>

<style></style>
